<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set scope="request" var="title" value="购物车"></c:set>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>${ title }</title>
    <base href="${ pageContext.servletContext.contextPath }/">
    <link rel="icon" href="statics/img/favicon.svg" sizes="any" type="image/svg+xml">
    <link rel="stylesheet" href="statics/css/base.css">
    <link rel="stylesheet" href="statics/css/manager.css">
</head>
<body>
    <%@include file="/pages/common/header.jsp"%>
    <!-- 主体 -->
    <main>
    	<c:if test="${ empty cart or cart.items.size() == 0 }">
    	<div class="flex-center h-100 ">
    		<a href="${ pageContext.servletContext.contextPath }" class="btn-link">亲，当前购物车为空！快跟小伙伴们去浏览商品吧！！！</a>
    	</div>
    	</c:if>
    	<c:if test="${ not empty cart and cart.items.size() != 0 }">
        <div class="table-outer">
    		<div class="table-inner">
	    		<table>
		        	<thead>
		        		<tr>
			        		<th>商品编号</th>
			        		<th>商品名称</th>
			        		<th>商品单价</th>
			        		<th>商品数量</th>
			        		<th>金额</th>
			        		<th>操作</th>
			        	</tr>
		        	</thead>
		        	<tbody>
			        	<c:forEach items="${ cart.items }" var="entry">
			        	<tr>
			        		<th>${ entry.value.id }</th>
			        		<td>${ entry.value.name }</td>
			        		<td>${ entry.value.price }</td>
			        		<td>
		        				<input class="updateCount" type="number" name="count" value="${ entry.value.count }" min="1" 
		        				data-id="${ entry.value.id }" data-name="${ entry.value.name }"/>
			        		</td>
			        		<td>${ entry.value.totalPrice }</td>
			        		<td>
			        			<a class="btn-link" href="cart/delete?id=${ entry.value.id }"">删除</a>
			        		</td>
			        	</tr>
			        	</c:forEach>
		        	</tbody>
		        </table>
	        </div>
    	</div>
        <ul class="table-footer flex-center">
        	<li>购物车中共有<strong>${ cart.totalCount }</strong>件商品</li>
        	<li>总金额<strong>${ cart.totalPrice }</strong>元</li>
        	<li><a href="cart/clear" class="btn-link">清空购物车</a></li>
        	<li><a class="btn-link" href="order/create">去结帐</a></li>
        </ul>
        </c:if>
    </main>
    <%@include file="/pages/common/footer.jsp" %>
    
    <script src="statics/lib/axios.js"></script>
    <script src="statics/js/cart.js"></script>
</body>
</html>